<template>
  <div class="wrap">
    <div class="w-title">
      实名认证
    </div>
    <div>
      <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 7 }" :wrapper-col="{ span: 10 }" >
        <a-form-model-item label="支付宝账号" prop="account" ref="account">
          <a-input v-model="form.account" />
        </a-form-model-item>
        <a-form-model-item label="支付宝姓名" prop="name" ref="name">
          <a-input v-model="form.name" />
        </a-form-model-item>
        <a-form-model-item label="身份证号码" prop="code" ref="code">
          <a-input v-model="form.code" />
        </a-form-model-item>
        <a-form-model-item label="身份证正面" prop="iamge_1" ref="iamge_1">
          <a-upload
            name="icon"
            listType="picture-card"
            :showUploadList="false"
            :customRequest="customRequest"
            @change="handleChange"
          >
            <img v-if="form.iamge_1" :src="form.iamge_1" alt="icon" style="width: 102px; height: 102px;" />
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item label="身份证反面" prop="image_2" ref="image_2">
          <a-upload
            name="icons"
            listType="picture-card"
            :showUploadList="false"
            :customRequest="customRequests"
            @change="handleChange"
            v-decorator="['sfzphotos', { rules: [{ required: true, message: '请上传身份证反面' }] }]"
          >
            <img v-if="form.image_2" :src="form.image_2" alt="icons" style="width: 102px; height: 102px;" />
            <div v-else>
              <a-icon :type="loadings ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </a-upload>
        </a-form-model-item>
        <a-form-model-item :wrapper-col="{ span: 4, offset: 7 }">
          <a-button type="primary" @click="handleSubmit">
            确认
          </a-button>
        </a-form-model-item>

      </a-form-model>
    </div>
  </div>
</template>

<script>
var qiniu = require("qiniu-js");
import { UP_TOKEN, REAL_NAME, GET_REAL_NAME } from '../server'
export default {
  layout: "main",
  components: {
  },
  data() {
    return {
      form: {
        account: '',
        name: '',
        code: '',
        iamge_1: '',
        image_2: ''
      },
      vOne: false,
      vTwo: true,
      icon: "",
      icons: "",
      loading: false,
      loadings: false,
      isCheck: "",
      rules: {
        account: [
          { required: true, message: '请输入支付宝账号', trigger: 'blur' },
        ],
        name: [
          { required: true, message: '请输入支付宝姓名', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' },
        ],
        iamge_1: [
          { required: true, message: '请上传身份证正面', trigger: 'blur' },
        ],
        image_2: [
          { required: true, message: '请上传身份证反面', trigger: 'blur' },
        ]
      },
      real_name_id: ''

    };
  },
  created() {
    this.getToken()
    this.getRearName()
  },
  mounted() {
  },
  methods: {
    getToken() {
      UP_TOKEN().then(res => {
        if (!res) return;
        this.qnToken = res.data;
      });
    },
    handleSubmit(e) {
      let real_name_id
      if (this.real_name_id) {
        real_name_id = this.real_name_id
      }
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          REAL_NAME({
            account: this.form.account,
            name: this.form.name,
            code: this.form.code,
            iamge_1: this.form.iamge_1,
            image_2: this.form.image_2,
            real_name_id
          }).then(res => {
            if (res.code != 200) {
              this.$message.error(res.msg);
              return;
            } else {
              this.$message.success(res.msg);
              this.getRearName()
              this.vTwo = false;
            }
          });
        } else {
          return false;
        }
      });
      // e.preventDefault();
      // this.form.validateFields((err, values) => {
      //   if (!err) {
      //     REAL_NAME({
      //       account: this.form.getFieldValue("zhifubao"),
      //       name: this.form.getFieldValue("zfb_name"),
      //       code: this.form.getFieldValue("sfz"),
      //       iamge_1: this.form.getFieldValue("sfzphoto"),
      //       image_2: this.icons,
      //     }).then(res => {
      //       if (res.code != 200) {
      //         this.$message.error(res.msg);
      //         return;
      //       } else {
      //         this.$message.success(res.msg);
      //         this.getRearName()
      //         this.vTwo = false;
      //       }
      //     });
      //   }
      // });
    },
    getRearName() {
      GET_REAL_NAME({
        type: 2
      }).then(res => {
        let {code, data} = res
        if (code == 200) {
          if (data.list.real_name_id) {
            this.form.account = data.list.account
            this.form.name = data.list.name
            this.form.code = data.list.code
            this.form.iamge_1 = data.list.iamge_1
            this.form.image_2 = data.list.image_2
            this.real_name_id = data.list.real_name_id
            this.$store.commit('rzstatus', data.list.type_type)
          }
        }
      });
    },
    closeTwo() {},
    handleChange() {},
    customRequest(file) {
      this.loading = true;
      this.inputUpload(file.file, file.filename);
    },
    customRequests(file) {
      this.loadings = true;
      console.log(file)
      this.inputUpload(file.file, file.filename);
    },
    inputUpload(e, n) {
      let that = this;
      let random1 = parseInt(Math.random() * 100000);
      let random2 = parseInt(Math.random() * 100000);
      let time = new Date().getTime();
      let d = e.name.lastIndexOf(".");
      let hz = e.name.substring(d);
      let fileName = "" + random1 + random2 + time + hz;
      let observable = qiniu.upload(e, fileName, this.qnToken);
      observable.subscribe({
        next() {},
        error() {
          that.$message.error("上传失败！");
        },
        complete(res) {
          that.loading = false;
          if (n == "icon") {
            that.form.iamge_1 = "https://oss.itemplay.com/" + res.key;
          } else if (n == "icons") {
            that.form.image_2 = "https://oss.itemplay.com/" + res.key;
          }
        }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.wrap {
  border: 3px solid #0084ff;
  border-radius: 6px;
  padding: 10px;
  .w-title {
    height: 40px;
    line-height: 40px;
    background: #0084ff;
    color: #fff;
    margin-bottom: 20px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: bold;
    padding-left: 16px;
  }
}
.box {
  .box-ltr {
    height: 164px;
    text-align: center;
    border-right: 1px solid #dadada;
    border-bottom: 1px solid #dadada;
    font-size: 16px;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    &:nth-child(2) {
      border-bottom: 0;
    }
    img {
      margin-bottom: 16px;
    }
  }
  .box-rtr {
    height: 164px;
    padding: 30px 0;
    border-bottom: 1px solid #dadada;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ff0000;
    .check {
      font-size: 16px;
      font-weight: bold;
    }
    &:nth-child(1) {
      line-height: 52px;
    }
    &:nth-child(2) {
      line-height: 82px;
      border-bottom: 0;
    }
    & > div {
      text-align: center;
    }
    .box-rtr-btn {
      text-align: right;
      padding-right: 24px;
    }
  }
  .md/deep/.ant-input-group-addon {
    color: #fff;
    background: #0084ff;
    cursor: pointer;
  }
}
</style>